<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
            style="float:right"
            type="primary"
            @click="handleSearchList()"
            size="small">
          查询搜索
        </el-button>
        <el-button
            style="float:right;margin-right: 15px"
            @click="handleResetSearch()"
            size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px" label-suffix="：">
          <el-form-item label="菜单名称">
            <el-input clearable v-model="listQuery.name" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" size="mini" style="margin-left: 20px" type="success" @click="handleRefreshCache()">
        刷新缓存
      </el-button>
      <el-button type="warning" size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">
        添加
      </el-button>
    </el-card>

    <div class="table-container">
      <el-table
          v-loading="listLoading"
          :data="allMenuTree"
          highlight-current-row
          :row-key="(row)=>{return row.id}"
          :expand-row-keys="['1']"
          :tree-props="{
          children: 'children',
          hasChildren: 'hasChildren',
        }"
      >
        <el-table-column label="菜单名称">
          <template #default="scope">
            <template v-if="scope.row.icon && scope.row.type != 4">
              <template v-if="scope.row.icon.startsWith('el-icon-')">
                <i :class="scope.row.icon"></i>
              </template>
              <template v-else>
                <svg-icon :icon-class="scope.row.icon"></svg-icon>
              </template>
            </template>
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column label="类型" align="center" width="80">
          <template #default="scope">
            <el-tag
                v-if="scope.row.type === '2'"
                type="warning"
            >目录
            </el-tag
            >
            <el-tag v-if="scope.row.type === '1'" type="success"
            >菜单
            </el-tag
            >
            <el-tag v-if="scope.row.type === '4'" type="danger"
            >按钮
            </el-tag
            >
            <el-tag v-if="scope.row.type === '3'" type="info"
            >外链
            </el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
            label="路由路径"
            align="left"
            prop="path"
        />

        <el-table-column
            label="组件路径"
            align="left"
            prop="component"
        />
        <el-table-column
            label="权限标识"
            align="center"
            prop="perm"
        />
        <el-table-column label="状态" align="center" width="80">
          <template #default="scope">
            <el-tag v-if="scope.row.visible === '1'" type="success">显示</el-tag>
            <el-tag v-else type="info">隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" width="80" prop="sort"/>

        <el-table-column fixed="right" align="center" label="操作" width="220">
          <template #default="scope">
            <el-link v-if="scope.row.type === '1' || scope.row.type === '2'" type="primary"
                     @click.stop="handleAdd(scope.row)" icon="el-icon-plus">新增
            </el-link>
            <el-link type="primary"
                     @click.stop="handleUpdate(scope.row)" icon="el-icon-edit" style="margin: 0 10px">编辑
            </el-link>
            <el-link type="danger"
                     @click.stop="handleDelete(scope.row)" icon="el-icon-delete">删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="编辑菜单管理"
               :visible.sync="editDialogVisible" @close="handleDialogClose('editDialogRef')"
               width="60%">
      <el-form :model="sysMenu" label-suffix="："
               :rules="formRule" ref="editDialogRef"
               label-width="150px" size="small">
        <el-form-item label="菜单名称">
          <el-input show-word-limit maxlength="64" :clearable="false" v-model="sysMenu.name"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="sysMenu.type" :disabled="sysMenu.parentId == '0'">
            <el-radio label="2">目录</el-radio>
            <el-radio label="1">菜单</el-radio>
            <el-radio label="4">按钮</el-radio>
            <el-radio label="3">外链</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="sysMenu.type != '3'">
          <template #label>
            <div>
              路由路径
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  定义应用中不同页面对应的 URL 路径，目录需以 /
                  开头，菜单项不用。例如：系统管理目录
                  /system，系统管理下的用户管理菜单 user。
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </div>
          </template>
          <el-input show-word-limit maxlength="128" clearable v-model="sysMenu.path" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item v-if="sysMenu.type == '1'">
          <template #label>
            <div>
              组件路径
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  组件页面完整路径，相对于 src/views/，如
                  system/user/index，缺省后缀 .vue
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </div>
          </template>
          <el-input show-word-limit maxlength="128" clearable v-model="sysMenu.component"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input show-word-limit maxlength="128" clearable v-model="sysMenu.perm" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item v-if="sysMenu.type == '1' || sysMenu.type == '2'">
          <template #label>
            <div>
              始终显示
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  当设置为始终显示时，即使只有一个子菜单也会显示<br/>
                  叶子节点的菜单，请选择“否”。
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </div>
          </template>
          <el-radio-group v-model="sysMenu.alwaysShow">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="页面缓存" v-if="sysMenu.type == '1'">
          <el-radio-group v-model="sysMenu.keepAlive">
            <el-radio label="1">开启</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示状态" v-if="sysMenu.type != '4'">
          <el-radio-group v-model="sysMenu.visible">
            <el-radio label="1">显示</el-radio>
            <el-radio label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
              v-model="sysMenu.sort"
              style="width: 100px"
              controls-position="right"
              :min="0"
          />
        </el-form-item>
        <el-form-item label="菜单图标" v-if="sysMenu.type != '4'">
          <iconPicker :init-icon="sysMenu.icon" @onSelect="onIconSelect" width="100%"></iconPicker>
        </el-form-item>
        <el-form-item label="外链地址">
          <el-input show-word-limit maxlength="128" clearable v-model="sysMenu.redirect"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="路由参数">
          <el-input clearable v-model="sysMenu.params" placeholder="请输入"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleEditDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增菜单管理"
               :visible.sync="addDialogVisible" @close="handleDialogClose('addDialogRef')"
               width="60%">
      <el-form :model="sysMenu" label-suffix="："
               :rules="formRule" ref="addDialogRef"
               label-width="150px" size="small">
        <el-form-item label="菜单名称">
          <el-input show-word-limit maxlength="64" :clearable="false" v-model="sysMenu.name"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="菜单类型">
          <el-radio-group v-model="sysMenu.type" :disabled="sysMenu.parentId == '0'">
            <el-radio label="2">目录</el-radio>
            <el-radio label="1">菜单</el-radio>
            <el-radio label="4">按钮</el-radio>
            <el-radio label="3">外链</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="sysMenu.type != '3'">
          <template #label>
            <div>
              路由路径
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  定义应用中不同页面对应的 URL 路径，目录需以 /
                  开头，菜单项不用。例如：系统管理目录
                  /system，系统管理下的用户管理菜单 user。
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </div>
          </template>
          <el-input show-word-limit maxlength="128" clearable v-model="sysMenu.path" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item v-if="sysMenu.type == '1'">
          <template #label>
            <div>
              组件路径
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  组件页面完整路径，相对于 src/views/，如
                  system/user/index，缺省后缀 .vue
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </div>
          </template>
          <el-input show-word-limit maxlength="128" clearable v-model="sysMenu.component"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input show-word-limit maxlength="128" clearable v-model="sysMenu.perm" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item v-if="sysMenu.type == '1' || sysMenu.type == '2'">
          <template #label>
            <div>
              始终显示
              <el-tooltip placement="bottom" effect="light">
                <template #content>
                  当设置为始终显示时，即使只有一个子菜单也会显示<br/>
                  叶子节点的菜单，请选择“否”。
                </template>
                <i class="el-icon-question"/>
              </el-tooltip>
            </div>
          </template>
          <el-radio-group v-model="sysMenu.alwaysShow">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="页面缓存" v-if="sysMenu.type == '1'">
          <el-radio-group v-model="sysMenu.keepAlive">
            <el-radio label="1">开启</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示状态" v-if="sysMenu.type != '4'">
          <el-radio-group v-model="sysMenu.visible">
            <el-radio label="1">显示</el-radio>
            <el-radio label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
              v-model="sysMenu.sort"
              style="width: 100px"
              controls-position="right"
              :min="0"
          />
        </el-form-item>
        <el-form-item label="菜单图标" v-if="sysMenu.type != '4'">
          <iconPicker :init-icon="sysMenu.icon" @onSelect="onIconSelect" width="100%"></iconPicker>
        </el-form-item>
        <el-form-item label="外链地址">
          <el-input show-word-limit maxlength="128" clearable v-model="sysMenu.redirect"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="路由参数">
          <el-input clearable v-model="sysMenu.params" placeholder="请输入"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAddDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
import {sysMenuPostRequire} from '@/api/sysMenu';

import iconPicker from '../../components/iconPicker/index';

const defaultListQuery = {
  name: undefined
}
const defaultSysMenu = {
  redirect: undefined,
  keepAlive: undefined,
  visible: '1',
  perm: undefined,
  icon: undefined,
  updateTime: undefined,
  sort: '0',
  type: '1',
  params: undefined,
  parentId: undefined,
  path: undefined,
  component: undefined,
  createTime: undefined,
  name: undefined,
  id: undefined,
  alwaysShow: undefined,
  treePath: undefined,
}
export default {
  components: {iconPicker},
  name: 'sysMenuList',
  data() {
    return {
      allMenuTree: [],
      formRule: {
        name: [{required: true, message: "请输入菜单名称", trigger: 'blur'}],
        type: [{required: true, message: "请选择菜单类型", trigger: 'blur'}],
        visible: [{required: true, message: "请选择显示状态", trigger: 'blur'}],
      },
      listQuery: this.$deepClone(defaultListQuery),
      listLoading: false,
      addDialogVisible: false,
      editDialogVisible: false,
      sysMenu: this.$deepClone(defaultSysMenu),
    }
  },
  created() {
    this.getList()
  },
  methods: {
    onIconSelect(icon) {
      this.sysMenu.icon = icon
    },
    handleResetSearch() {
      this.listQuery = this.$deepClone(defaultListQuery)
    },
    handleSearchList() {
      this.getList()
    },
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate()
      }
    },
    handleRefreshCache() {
      sysMenuPostRequire('refreshCache', {}).then(response => {
        if (response) {
          this.$message({
            message: response.message,
            type: response.status ? 'success' : 'error'
          })
          this.getList()
        }
      })
    },
    handleAdd(parent) {
      this.sysMenu = this.$deepClone(
          defaultSysMenu)
      if (parent) {
        this.sysMenu.parentId = parent.id
        this.sysMenu.treePath = parent.treePath + "," + parent.id
      } else {
        this.sysMenu.parentId = '0'
        this.sysMenu.treePath = '0'
        this.sysMenu.type = '2'
      }
      this.addDialogVisible = true
    },
    handleAddDialogConfirm() {
      this.$refs.addDialogRef.validate((valid) => {
        if (valid) {
          sysMenuPostRequire('add', this.sysMenu).then(response => {
            if (response) {
              this.$message({
                message: response.message,
                type: response.status ? 'success' : 'error'
              })
            }
            this.addDialogVisible = false
          }).finally(() => {
            this.getList()
          })
        }
      });
    },
    handleDelete(row) {
      this.$confirm('是否要删除该菜单管理?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysMenuPostRequire('delete', {'id': row.id}).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
        }).finally(() => {
          this.getList()
        })
      })
    },
    handleUpdate(row) {
      this.editDialogVisible = true
      this.sysMenu = this.$deepClone(row)
    },
    handleEditDialogConfirm() {
      this.$refs.editDialogRef.validate((valid) => {
        if (valid) {
          sysMenuPostRequire('update', this.sysMenu).then(response => {
            if (response) {
              this.$message({
                message: response.message,
                type: response.status ? 'success' : 'error'
              })
            }
            this.editDialogVisible = false
          }).finally(() => {
            this.getList()
          })
        }
      });
    },
    getList() {
      this.listLoading = true
      sysMenuPostRequire('listPage', this.listQuery).then(response => {
        this.listLoading = false
        this.allMenuTree = response.data || []
      })
    }
  }
}
</script>
<style scoped>

[class^=el-icon-] {
  text-align: unset !important;
  width: 1.2em !important;
}
</style>